<template>
  <el-card body-style="min-height: 86vh">
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreateRepair()">开维修单</el-button>
      </div>
      <div>
        <el-button circle>
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="车主姓名" prop="name" width="120" align="center"></el-table-column>
      <el-table-column label="车主电话" prop="phone" width="180" align="center"></el-table-column>
      <el-table-column label="车型" prop="cartype" align="center"></el-table-column>
      <el-table-column label="车牌号" prop="carnumber" width="180" align="center"></el-table-column>

      <el-table-column label="状态" prop="status" align="center">
        <template >
          <el-tag type="danger">待车检</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template >
          <el-button type="primary" @click="handleCreatePreFlight()">预检</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 开维修单 -->
    <form-drawer ref="formDrawerRefRepair" title="开维修单" @submit="handleSubmitRepair">
      <el-form ref="formRefRepair" :model="formRepair" label-width="80px">
        <el-form-item label="车牌号" prop="carnumber">
          <!-- :fetch-suggestions="querySearchAsync"
           @select="handleSelect" -->
          <el-autocomplete
            v-model="formRepair.state"
            
            placeholder="Please input"
            
          />
        </el-form-item>
        <el-form-item label="车主姓名" prop="name">
          <el-input v-model="formRepair.name" placeholder="请输入车主姓名" clearable />
        </el-form-item>
      </el-form>
    </form-drawer>
    <!-- 预检 -->
    <form-drawer ref="formDrawerRefPreFlight" title="预检" @submit="handleSubmitPreFlight">
      <el-descriptions title="基本信息" :column="3" border>
        <el-descriptions-item label="车主姓名">kooriookami</el-descriptions-item>
        <el-descriptions-item label="车主电话">18100000000</el-descriptions-item>
        <el-descriptions-item label="车牌号">粤A12345</el-descriptions-item>
      </el-descriptions>
      <div></div>
      <div class="mt-5 font-bold">外观检查</div>
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="隐患备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入隐患备注"
            clearable
          />
        </el-form-item>
        <el-form-item label="隐患图片">
          <el-upload
            v-model:file-list="form.fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="mt-5 font-bold">内饰检查</div>
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="隐患备注">
          <el-input
            v-model="form.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入隐患备注"
            clearable
          />
        </el-form-item>
        <el-form-item label="隐患图片">
          <el-upload
            v-model:file-list="form.fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
const tableData = ref([
  {
    name: "张三",
    phone: "12345678901",
    cartype: "B-本田｜奥德赛-广州本田｜2.0L-混合动力｜2021｜2021款 2.0L 无级锐智享版",
    carnumber: "粤A12345",
    pretime: "2024-01-01",
    nexttime: "2024-06-01"
  }
]);

// 开维修单
const {
  formDrawerRef: formDrawerRefRepair,
  form: formRepair,
  formRef: formRefRepair,
  handleCreate: handleCreateRepair,
  handleSubmit: handleSubmitRepair
} = useInitForm({});

// 预检
const {
  form,
  formDrawerRef: formDrawerRefPreFlight,
  handleCreate: handleCreatePreFlight,
  handleSubmit: handleSubmitPreFlight
} = useInitForm({
  form: {
    remark: "",
    fileList: []
  }
});
</script>
<style scoped lang="scss"></style>
